<template>
  <div class="container" v-loading="loading" element-loading-text="查询中...">
    <AmapPolyline
      ref="amapPolylineRef"
      :search-config="searchConfig"
      :module-config="moduleConfig"
      :vco-types="TRANSPORT_VCO_TYPE"
      :map-data="mapData"
      @search="onSearch"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { AmapPolyline } from "@zszc/co-amapui-polyline-v3";
import { data, data1, TRANSPORT_VCO_TYPE } from "./mock";

const amapPolylineRef = ref<InstanceType<typeof AmapPolyline> | null>(null);

// searchConfig 搜索表单配置
const searchConfig = ref<any>({
  vno: {
    disabled: true
  },
  vcoTypes: {
    disabled: true
  },
  startLonlat: {
    isShow: false
  },
  endLonlat: {
    isShow: false
  }
});

// moduleConfig 模块配置
const moduleConfig = ref<any>({
  panel: {
    isShow: true,
    trackList: false,
    parkList: false,
    cityList: true
  }
});

const loading = ref(false);
const mapData = ref<any>();
const onSearch = async (params: any) => {
  console.log(params, "params");
  mapData.value = {
    trackList: []
  };
  setTimeout(() => {
    loading.value = true;
    try {
      mapData.value = Math.random() > 0.5 ? data : data1;
    } finally {
      loading.value = false;
    }
  }, 1000);
};

onMounted(() => {
  amapPolylineRef.value?.setSearchForm({
    vno: "冀A3H778",
    vco: "1",
    qryBtm: "2025-11-02 22:39:35",
    qryEtm: "2025-11-03 22:40:35"
  });
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
